<template>
	<view class="cart_warp">
		<u-sticky>
			<u-tabs-swiper :bar-height="70" :bar-width="180" :bar-style="{backgroundColor:'#20cbd4'}" 
				bg-color="#fff" active-color="#fff" inactive-color="#20cbd4"
				:list="sectionList" :current="sectionCurrent" @change="sectionChange" 
				:is-scroll="false" :offset="[10,50]"></u-tabs-swiper> 
		</u-sticky>
		<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		<view class="info_bar" v-if="!isEmpty">
			<view class="number_txt">
				<view class="info_txt">共</view>
				<view class="main_txt">{{carList.length}}</view>
				<view class="info_txt">件商品</view>
			</view>
			<view class="main_txt" @click="editClick">{{editText}}</view>
		</view>
		<view class="goodsList" v-if="!isEmpty">
			<view class="goodsItem" v-for="(item , index) in carList" :key="index">
				<view>
					<u-checkbox v-model="item.checked" @change="checkedItem" 
					:name="index" shape="circle" active-color="#20cbd4"></u-checkbox>
				</view>
				<view>
					<image :src="item.goods_image" style="width: 200rpx;height: auto;" mode="widthFix"></image>
				</view>
				<view class="goodsInfo">
					<view class="goodsTitle u-line-2">{{item.goods_name}}</view>
					<view class="goodsNorm info_txt u-line-1">{{item.goods_sku.goods_attr}}</view>
					<view class="goodsFooter">
						<view v-if="item.q_id == 1" class="itemPrice"><text style="font-size: 20rpx;">¥</text>{{item.goods_price}}</view>
						<view v-if="item.q_id == 2" class="itemPrice">
							<text style="font-size: 20rpx;">¥</text>
							<text v-if="item.points>0">{{item.price}}+{{item.points}}</text>
							<text v-else>{{item.price}}</text>
							<text style="font-size: 20rpx;" v-if="item.points>0">券</text>
						</view>
						<view v-if="item.q_id == 3" class="itemPrice">
							<text style="font-size: 20rpx;">¥</text>
							<text v-if="item.points>0">{{item.price}}+{{item.points}}</text>
							<text v-else>{{item.price}}</text>
							<text style="font-size: 20rpx;" v-if="item.points>0">券</text>
						</view>
						<view v-if="item.q_id == 4" class="itemPrice">
							<text style="font-size: 20rpx;">¥</text>
							<text v-if="item.points>0">{{item.price}}+{{item.points}}</text>
							<text v-else>{{item.price}}</text>
							<text style="font-size: 20rpx;" v-if="item.points>0">券</text>
						</view>
					</view>
					<view style="text-align: right;margin-top: 10rpx;">
						<u-number-box :disabled-input="true" color="#20cbd4" :step="item.goods_sku.buy_add" :min="item.goods_sku.buy_min" :max="99999" v-model="item.total_num" :index="index" @plus="plusChange" @minus="minusChange"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_box">
			<view class="footer" v-if="!isEmpty">
				<view>
					<u-checkbox @change="checkedAll" v-model="clickAll"
					name="all" shape="circle" active-color="#20cbd4">全选</u-checkbox>
				</view>
				<view class="rightPart">
					<view v-if="!isShowRemove" class="totalPrice">
						<text style="font-size: 20rpx;">¥</text>
						{{totalPrice}}<text v-if="!isShowRemove&& (sectionCurrent==1||sectionCurrent==2||sectionCurrent==3)">+{{totalPoint}}
						<text style="font-size: 20rpx;">券</text></text></view>
					<view v-if="!isShowRemove && (sectionCurrent==1||sectionCurrent==2||sectionCurrent==3)" class="totalPrice"></view>
				</view>
			</view>
			<view class="footer">
				<view class="checkNum">已选数量：{{checkNum}}件</view>
				<view class="rightPart">
					<u-button v-if="!isShowRemove && sectionCurrent==0" shape="circle" size="medium"
							  :custom-style="customStyle" hover-class="none" @click="assistSettle">代购</u-button>
					<u-button v-if="!isShowRemove" shape="circle" size="medium"
					:custom-style="customStyle" hover-class="none" @click="settlement">结算</u-button>
					<u-button v-if="isShowRemove" shape="circle" size="medium"
					:custom-style="removeStyle" hover-class="none" @click="removeClick">删除</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<login-model ref="loginModel"></login-model>
	</view>
</template>

<script>
	import {cartLists,delCart,cartCount,isLogin,addCart,addCartAssist} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	export default {
		components: {
			loginModel,
			empty
		},
		data() {
			return {
				sectionList: [
					{
						name: '主推区',
						count:0
					}, 
					{
						name: '优选区',
						count:0
					}, 
					{
						name: '福利区',
						count:0
					},
					// {
					// 	name: '超享区',
					// 	count:0
					// }
				],
				carList:[],
				sectionCurrent: 0,
				editText:"编辑",
				clickAll:false,
				isShowRemove:false,
				totalPrice:"0.00",
				totalPoint:"0",
				customStyle:{
					background:"#20cbd4",
					color:"#fff",
					marginBottom:"10rpx"
				},
				removeStyle:{
					background:"linear-gradient(90deg,#f44739,#f60)",
					color:"#fff",
					marginBottom:"10rpx"
				},
				value : 1,
				removeArr:"",
				isReady:false,
				checkNum:0,
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无购物车信息",
				updateFlag:true //购物车修改，如果是结算时，不触发页面隐藏方法
			}
		},
		onShow() {
			this.clickAll = false;
			//isLogin(this,{type:1});
		},
		onHide() {
			this.$refs.loginModel.closeModel();
			if(this.updateFlag && this.isLogin){
				this.updateNum();
			}
		},
		onTabItemTap(e){
			console.log("菜单栏点击事件："+e)
			isLogin(this,{type:1});
		},
		methods: {
			selectCarNum(){
				cartCount(this,{});
			},
			selectCartLists(){
				this.carList = [];
				this.totalPrice = "0.00";
				this.totalPoint = "0";
				this.removeArr = "";
				this.checkNum = 0;
				cartLists(this,{q_id:this.sectionCurrent+1})
			},
			//点击顶部专区切换
			sectionChange(index) {
				this.clickAll=false;
				this.sectionCurrent = index;
				this.updateNum(2);
				//this.selectCartLists()
			},
			//购物车数量修改
			updateNum(updateType){
				var goods_ids = "";
				var goods_sku_ids = "";
				var goods_nums = "";
				
				for(var i in this.carList){
					goods_ids=goods_ids+this.carList[i].goods_id+",";
					goods_sku_ids=goods_sku_ids+this.carList[i].spec_sku_id+",";
					var num = this.carList[i].total_num-this.carList[i].total_num_fake;
					goods_nums=goods_nums+num+",";
				}
				
				addCart(this,{type:0,goods_id:goods_ids,goods_sku_id:goods_sku_ids,goods_num:goods_nums,updateType:updateType});
			},
			editClick(){
				var temp=this.isShowRemove;
				this.isShowRemove=!temp;
				if(this.isShowRemove){
					this.editText="完成";
				}else{
					this.editText="编辑";
				}
				
			},
			checkedItem(e){
				var totalPrice=this.totalPrice*1;
				var totalPoint=this.totalPoint*1;
				var price=0;
				var point=0;
				if(this.carList[e.name].q_id == 1){
					price=this.carList[e.name].goods_price*1;
				}else if(this.carList[e.name].q_id == 2){
					price=this.carList[e.name].price*1;
					point=this.carList[e.name].points*1; 
				}else if(this.carList[e.name].q_id == 3){
					// price=19.9*1;
					price=this.carList[e.name].price*1;
					point=this.carList[e.name].points*1;
				}else if(this.carList[e.name].q_id == 4){
					price=this.carList[e.name].price*1;
					point=this.carList[e.name].points*1;
				}
				var number=this.carList[e.name].total_num;
				if(e.value){
					totalPrice=totalPrice+price*number;
					totalPoint=totalPoint+point*number;
					this.removeArr+=this.carList[e.name].goods_sku_id+",";
				}else{
					totalPrice=totalPrice-price*number;
					totalPoint=totalPoint-point*number;
					var removeArr=this.removeArr.split(",");
					for(var i=0;i<removeArr.length;i++){
						if(removeArr[i]==this.carList[e.name].goods_sku_id){
							removeArr.splice(i,1);
						}
					}
					this.removeArr=removeArr.toString();
				}
				this.totalPrice=totalPrice.toFixed(2);
				this.totalPoint=totalPoint;
				var falseNum=0;
				this.carList.map(val => {
					if(!val.checked){
						falseNum++;
					}
				})
				if(falseNum==1){
					this.clickAll=true;
				}else{
					this.clickAll=false;
				}
				if(this.removeArr.substring(0,this.removeArr.length-1).split(",").toString()==""){
					this.checkNum=0; 
				}else{
					this.checkNum=this.removeArr.substring(0,this.removeArr.length-1).split(",").length; 
				}
				
			},
			// 全选
			checkedAll(e) {
				this.removeArr="";
				this.clickAll=e.value;
				var totalPrice=0;
				var totalPoint=0;
				this.carList.map(val => {
					val.checked = e.value;
					if(e.value){
						var price=0;
						var point=0;
						if(val.q_id == 1){
							price=val.goods_price*1;
						}else if(val.q_id == 2){
							price=val.price*1;
							point=val.points*1; 
						}else if(val.q_id == 3){
							// price=19.9;
							price=val.price*1;
							point=val.points*1;
						}else if(val.q_id == 4){
							price=val.price*1;
							point=val.points*1;
						}
						
						var number=val.total_num;
						totalPrice=totalPrice+price*number;
						totalPoint=totalPoint+point*number;
						this.removeArr+=val.goods_sku_id+",";
					}
				})
				if(!e.value){
					totalPrice=0;
					totalPoint=0;
					this.removeArr="";
				}
				this.totalPrice=totalPrice.toFixed(2);
				this.totalPoint=totalPoint;
				if(this.removeArr.substring(0,this.removeArr.length-1).split(",").toString()==""){
					this.checkNum=0; 
				}else{
					this.checkNum=this.removeArr.substring(0,this.removeArr.length-1).split(",").length; 
				}
			},
			settlement(){
				if(this.removeArr==""){
					this.$refs.uToast.show({title: '请选择要结算的商品'});
					return;
				}
				this.updateFlag = false;
				var goods_ids = "";
				var goods_sku_ids = "";
				var goods_nums = "";
				
				var cart
				var buy_add = 0
				var buy_min = 0
				var curNum = 0
				var m = 0
				var goods_name = ""
				
				for(var i in this.carList){
					if(!this.carList[i].checked){
						continue;
					}
					
					cart = this.carList[i]
					buy_add = cart.goods_sku.buy_add
					buy_min = cart.goods_sku.buy_min
					curNum = cart.total_num
					goods_name = cart.goods_name
					
					if(curNum<buy_min){
						this.$refs.uToast.show({title: goods_name+'商品最低购买'+buy_min+'件'});
						return;
					}
					
					m = parseInt((curNum-buy_min)/buy_add)
					if(buy_add*m!=(curNum-buy_min)){
						his.$refs.uToast.show({title: goods_name+'每次增加数为'+buy_add+'的倍数'});
						return;
					}
					
					goods_ids=goods_ids+this.carList[i].goods_id+",";
					goods_sku_ids=goods_sku_ids+this.carList[i].spec_sku_id+",";
					var num = this.carList[i].total_num-this.carList[i].total_num_fake;
					goods_nums=goods_nums+num+",";
				}
				addCart(this,{type:0,goods_id:goods_ids,goods_sku_id:goods_sku_ids,goods_num:goods_nums,updateType:1});
				
			},
			assistSettle(){
				if(this.removeArr==""){
					this.$refs.uToast.show({title: '请选择要结算的商品'});
					return;
				}
				if(this.sectionCurrent!=0){
					this.$refs.uToast.show({title: '请选择主推区商品'});
					return;
				}
				var goods_ids = "";
				var goods_sku_ids = "";
				var goods_nums = "";
				
				var cart
				var buy_add = 0
				var buy_min = 0
				var curNum = 0
				var m = 0
				var goods_name = ""
				
				for(var i in this.carList){
					
					cart = this.carList[i]
					buy_add = cart.goods_sku.buy_add
					buy_min = cart.goods_sku.buy_min
					curNum = cart.total_num
					goods_name = cart.goods_name
					
					if(curNum<buy_min){
						this.$refs.uToast.show({title: goods_name+'最低购买'+buy_min+'件'});
						return;
					}
					
					m = parseInt((curNum-buy_min)/buy_add)
					if(buy_add*m!=(curNum-buy_min)){
						this.$refs.uToast.show({title: goods_name+'每次增加数为'+buy_add+'的倍数'});
						return;
					}
					
					goods_ids=goods_ids+this.carList[i].goods_id+",";
					goods_sku_ids=goods_sku_ids+this.carList[i].spec_sku_id+",";
					var num = this.carList[i].total_num-this.carList[i].total_num_fake;
					goods_nums=goods_nums+num+",";
				}
				addCartAssist(this,{type:3,goods_id:goods_ids,goods_sku_id:goods_sku_ids,goods_num:goods_nums,updateType:3});

			},
			removeClick(){
				if(this.removeArr==""){
					this.$refs.uToast.show({title: '请选择要删除的商品'});
					return;
				}
				delCart(this,{goods_sku_id:this.removeArr})
			},
			plusChange(e) {
				var totalPrice=this.totalPrice*1;
				var totalPoint=this.totalPoint*1;
				var price=0;
				var point=0;
				
				var buy_add = this.carList[e.index].goods_sku.buy_add
				
				if(this.carList[e.index].q_id == 1){
					price=this.carList[e.index].goods_price*buy_add;
				}else if(this.carList[e.index].q_id == 2){
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add; 
				}else if(this.carList[e.index].q_id == 3){
					// price=19.9*1;
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add;
				}else if(this.carList[e.index].q_id == 4){
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add;
				}
				if(this.carList[e.index].checked){
					this.totalPrice=(totalPrice+price).toFixed(2);
					this.totalPoint=totalPoint+point; 
				}
			},
			minusChange(e) {
				var totalPrice=this.totalPrice*1;
				var totalPoint=this.totalPoint*1;
				var price=0;
				var point=0;
				
				var buy_add = this.carList[e.index].goods_sku.buy_add
				if(this.carList[e.index].q_id == 1){
					price=this.carList[e.index].goods_price*buy_add;
				}else if(this.carList[e.index].q_id == 2){
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add; 
				}else if(this.carList[e.index].q_id == 3){
					// price=19.9*1; 
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add;
				}else if(this.carList[e.index].q_id == 4){
					price=this.carList[e.index].price*buy_add;
					point=this.carList[e.index].points*buy_add;
				}
				if(this.carList[e.index].checked){
					this.totalPrice=(totalPrice-price).toFixed(2); 
					this.totalPoint=totalPoint-point; 
				}
			},
			
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
	.cart_warp{
		font-family: PingFang SC;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
	}
	.info_bar{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx;
	}
	.number_txt{
		display: flex;
	}
	.info_txt{
		color: #909399;
	}
	.main_txt{
		color: #0e595d;
	}
	.goodsList{
		margin: 0 0 180rpx 0;
	}
	.goodsItem{
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* margin-bottom: 15rpx; */
	}
	.goodsInfo{
		margin-left: 20rpx;
	}
	.goodsTitle{
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.goodsNorm{
		font-size: 25rpx;
		margin-bottom: 20rpx;
	}
	.goodsFooter{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 420rpx;
	}
	.itemPrice{
		color: #fa3534;
		font-weight: 500;
	}
	
	.footer_box{
		width: 100%;
		position: fixed;
		/*  #ifdef  H5  */
		bottom: 100rpx;
		/*  #endif  */
		/*  #ifndef  H5  */
		bottom: 0;
		/*  #endif  */
		background-color: #fff;
		/* margin-bottom: 30rpx;  */
	}
	
	.footer{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		padding:10rpx 20rpx 0;
		align-items: center;
		z-index: 100;
	}
	.rightPart{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.totalPrice{
		margin-right: 15rpx;
		font-size: 35rpx;
		font-weight: 500;
		color: #FA3534;
	}
	.checkNum{
		font-size: 25rpx;
		color: #909399;
		margin-right: 15rpx;
	}
</style>
